import React from 'react';
import { BrowserRouter as Router, NavLink, Route,history } from 'react-router-dom'
import Action from '../rd/Action'
import Store from '../rd/Store'
import axios from 'axios'

  
import Reg from '../css/Register.module.css'
import { Checkbox } from 'antd';

export default class Register extends React.Component {
    constructor(props) {

        super(props)
        this.state={
            info:Store.getState().Res,
            ip1:false,
            ip2:false,
            ip3:false,
            ip4:false,
            
            
        }
        this.changeitem=this.changeitem.bind(this)
    }
    changeitem(){
		this.setState({
			info:Store.getState().Res
			
		})
	}
	
	componentDidMount(){
		Store.subscribe(this.changeitem)
	}
	too(){

        this.props.history.push('/login')
        // window.location.href="/login"
    }
    render() {
      
        return (
            <div className={Reg.box}>
               <div className={Reg.logo}>

                    <img src="http://image.fast.126net.cn/group2/M00/01/35/wKgBTFt1O66AHsxxAABSTbPxnPI447.png"/>
                    <h2>会员注册</h2>
                    
                   
                    <p>已有会员账号<span onClick={this.too.bind(this)}>登录</span></p>
                    
                    
               </div>
               <hr/>
               <div className={Reg.ipt}>
                    <p><b>*<span>用户名：</span></b></p>
                    <span ref="ss" className={Reg.spp}></span>
                    <input type="text"    ref="ipt1" onBlur={this.name.bind(this)}/> 
                    <p>*<span>密码：</span></p>
                    <span ref="mi" className={Reg.spp}></span>
                    <input type="password" ref="ipt2"  onBlur={this.mi.bind(this)}/> 
                    <p>*<span>确认密码：</span></p>
                    <span ref="smi" className={Reg.spp}></span>
                    <input type="password" ref="ipt3" onBlur={this.smi.bind(this)}/> 
                    <p>*<span>邮箱：</span></p>
                    <span ref="emi" className={Reg.spp}></span>
                    <input type="emial" ref="ipt4" onBlur={this.emi.bind(this)} /> 
                    <p>*<span>验证码：</span></p>
                    <span ref="yan" className={Reg.spp}></span>
                    <input type="text" ref="ipt5" /> <span ><img  src="https://wanjuyueqi03-mb.126net.cn/RandCheckCode/do?rand=memberRegister"/></span>
                    <h3><Checkbox /><span>我同意"服务条款"及"法律声明"</span></h3>
                   <div className={Reg.btns}> <button className={Reg.btn}  onClick={this.tijiao.bind(this)}>提交</button></div>
                   <div className={Reg.foot}>Copyright © 2018 琴峰玩具乐器商行. All Rights Reserved 本站内容、图片、视频为网站模板演示数据，如有涉及侵犯版权，请联系我们提供书面反馈，我们核实后会立即删除。</div>
                    </div>
            </div>
        )
    }

    // res(){

	// 	 

       

    // }

    name(){
        let a =/^[a-z0-9_-]{4,8}$/;
        if (a.test(this.refs.ipt1.value) != true) {
            this.refs.ss.innerHTML = "用户名只能是数字字母下划线-组成，4到8位";
            this.setState({
                ip1:false
            })
          } else {
            this.refs.ss.innerHTML = "";
           this.setState({
               ip1:true
           })
          }

    }
    mi(){
        let a = /\S{6,12}/;
        if (a.test(this.refs.ipt2.value) != true) {
            this.refs.mi.innerHTML = "密码只能是6到12位";
            this.setState({
                ip1:false
            })
          } else {
            this.refs.mi.innerHTML = "";
            this.setState({
                ip2:true
            })
          }

    }
    smi(){
        
        if (this.refs.ipt3.value != this.refs.ipt2.value) {
            this.refs.smi.innerHTML = "两次密码不一致";
            this.setState({
                ip1:false
            })
          } else {
            this.refs.smi.innerHTML = "";
            this.setState({
                ip3:true
            })
          }

    }
    emi(){
        let a = /^([A-Za-z0-9_\-\.])+\@([qq|163|126])+\.(com|cn|com\.cn)$/;
        if (a.test(this.refs.ipt4.value) != true) {
            this.refs.emi.innerHTML = "邮箱输入有误";
            this.setState({
                ip4:false
            })
          } else {
            this.refs.emi.innerHTML = "";
            this.setState({
                ip4:true
            })
          }

    }
    // yan(){
    //     let a = /\S{6,12}/;
    //     if (a.test(this.refs.ipt5.value) != true) {
    //         this.refs.ss.innerHTML = "用户名只能是6到12位，不能有特殊字符";
    //       } else {
    //         this.refs.ss.innerHTML = "";
    //         // this.fb = true;
    //       }

    // }

tijiao(){
    let _this=this
    console.log(this.refs.ipt1.value)
    axios({
        method:"post",
       url:'http://api.cat-shop.penkuoer.com/api/v1/auth/reg' ,
       data:{userName:this.refs.ipt1.value,password:this.refs.ipt2.value}

    }).then(function(data){
      

        if(_this.state.ip1==true&&_this.state.ip2==true&&_this.state.ip3==true&&_this.state.ip4==true){
            if(data.data.code=='success'){
                alert(data.data.code)
                  window.location.href="/login"
            }
           else{
            alert(data.data.message)

           }

              
        }else{
            alert('请填写正确资料')
        }
    })


}

}